import { Form, Select, Button, Icon, Radio, Card } from "antd";
import * as React from 'react';
import { setLastSelect } from '../../common/utils';
import './index.less';
import { OverviewProps, OneDayStatics } from '../home-all-overview';
import getChartOption from './horizontal-bar-template';
import Chart from '../chart';

interface ProjectInfo {
    id: number,
    loginName: string,
    chineseName: string,
    role: number,
    name: string
}
interface ErrorRateChartProps extends OverviewProps {
    projectList: ProjectInfo[]
}

interface IdDic {
    [id: number]: string
}

function getErrorRateChartData(id2name: IdDic, overview1: OneDayStatics[], overview2: OneDayStatics[]) {
    let orderedOverview = overview1.sort((item1, item2) => parseFloat(item2.rate) - parseFloat(item1.rate));
    // 如果pv小于200，可能是正在开发的项目，此处不予显示
    orderedOverview = orderedOverview.filter(item => item.pv > 200);
    let yesterdayTop10 = orderedOverview.slice(0, 10);
    let seriesData1 = [], seriesData2 = [], axisData = [];
    yesterdayTop10.forEach(item => {
        axisData.push(`${item.badjsid}.${id2name[item.badjsid]}`);
        seriesData1.push(item.rate);
        const statics = overview2.filter(statics => statics.badjsid === item.badjsid)[0] || {rate: 0};
        seriesData2.push(statics.rate);
    });
    return { axisData: axisData.reverse(), seriesData1: seriesData1.reverse(), seriesData2: seriesData2.reverse() }
}


export default function ErrorRateChart(props: ErrorRateChartProps) {
    const id2name: IdDic = {};
    const { projectList = [], overview, loading } = props;
    projectList.forEach(project => {
        id2name[project.id] = project.name
    });
    const chartData = getErrorRateChartData(id2name, overview.overview1, overview.overview2);
    const optionTwoDaysAgo = getChartOption(chartData.seriesData1, chartData.seriesData2, chartData.axisData);
    const clickFunc = param => {
        const id = param.name.split('.')[0];
        setLastSelect(id);
        window.location.href = window.location.protocol + '//' + window.location.hostname + "/#/project-daily-statics";
    };
    return (
        <div className="home-error-rate-chart">
            <h3>昨日错误率排行(%)</h3>
            <Card
                className="chart-backgounrd"
                hoverable
                loading={loading}
                style={{
                    padding: 0,
                    width: '50%'
                }}
            >
                <div className="charts-wrap">
                    <Chart option={optionTwoDaysAgo} clickFunc={clickFunc} styleName="error-rate-chart"></Chart>
                </div>
            </Card>
        </div>
    )
}